<!doctype html>
<html lang="en">
<head>
    <title>Slider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
    <script type="text/javascript">
    $(function() {
       
        var ticks = ['20s', '30s', '40s', '50s', '60s', '70s', '80s', '90s', '00s'];

        var slider = $("#slider").slider({
            min: 0,
            max: ticks.length,
            range: true,
            values: [4, 7],
            start: function(event, ui) {
                event.originalEvent.type == "mousedown" && $(this).addClass("ui-slider-mousesliding");
            },
            stop: function(event, ui) {
                $(this).removeClass("ui-slider-mousesliding");
                refreshRange();
                refreshTicks();
            },
            slide: function(event, ui) {
                if (ui.values[0] == ui.values[1])
                    return false;
                refreshRange();
                refreshTicks();
            }
        });

        function refreshRange() {
            var s = slider
                , min = s.slider("option", "min"), max = s.slider("option", "max")
                , lo = s.slider("values", 0), hi = s.slider("values", 1)
                , atMin = (lo == min), atMax = (hi == max);
            s.find(".ui-slider-range")
                [(atMin ? 'add' : 'remove') + 'Class']("ui-corner-left")
                [(atMax ? 'add' : 'remove') + 'Class']("ui-corner-right");
        }

        function refreshTicks() {
            var s = slider
                , lo = s.slider("values", 0), hi = s.slider("values", 1);
            s.find(".tick").each(function(i) {
                var inRange = (i >= lo && i < hi);
                $(this)
                    [(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
                    [(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
            });
        }

        $(ticks).each(function(i) {
            var tick = $('<div class="tick ui-widget-content">' + this + '</div>').appendTo(slider);
            tick.css({
                left: (100 / ticks.length * i) + '%',
                width: (100 / ticks.length) + '%'
            });
        })

        slider.find(".tick:first").css("border-left", "none");

        slider.find(".ui-slider-handle").css("opacity", 0.8);

        slider.find(".ui-slider-handle:first").addClass("ui-slider-handle-lo").removeClass("ui-corner-all").addClass("ui-corner-right");
        slider.find(".ui-slider-handle:last").addClass("ui-slider-handle-hi").removeClass("ui-corner-all").addClass("ui-corner-left");

        refreshRange();
        refreshTicks();
        
        $('#switcher').themeswitcher();
    });
    </script>
    <style type="text/css">
    body { font-size: 62.5%; background: #373737; }
    #slider { height: 3.5em; border-width:0px 1px; width: 60em; }
    #slider .ui-slider-range { z-index: 1; }
    #slider .tick { z-index: 2; position: absolute; height: 100%; font-size: 1.8em; line-height: 1.8em; background: none; border-top: none; border-right: none; border-bottom: none; text-align: center; }
    #slider .ui-slider-handle { z-index: 3; height: 2.5em; width: 0.6em; margin-left: -0.3em; top: 0; border: none; margin-top: 0.5em; cursor: e-resize; }
    .ui-slider-mousesliding, .ui-slider-mousesliding .ui-slider-range, .ui-slider-mousesliding .tick { cursor: e-resize; }
    .ui-slider-handle-lo { width: .5em !important; margin-left: 1px !important; }
    .ui-slider-handle-hi { width: .5em !important; margin-left: -.5em !important; }
    #switcher { float: right; }
    </style>
</head>
<body>

<div id="switcher"></div>

<div id="slider">
</div>

</body>
</html>